<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性</title>
    <style>
        *{
            padding:0;
            margin:0;
            font-family:"Microsoft Yahei";
            font-size:18px;
            color:#131616;
            text-decoration:none;
            list-style:none;
        }
        .list{
            width:80%;
            margin:80px auto;
        }
        ul{
            width:100%;
            display:flex;                                               /*弹性布局*/
            justify-content: space-around;                             /*让每个项目的间隔相等*/
            align-items:center;                                        /*让每个项目在交叉轴上居中对齐*/
        }
        li{
            width:26%;
            position:relative;
        }
        img{
            width:100%;
            border:1px solid rgba(55,20,3,0.6);
            border-radius:2em;
            box-shadow:0 0 10px 0 #111;
        }
        a{
            display:block;
        }
        span:hover{
            height:calc(100% + 40px);                               /*使用calc计算高度，100%加上span的高度*/
            font-size:30px;
            color:rgba(20,0,233,0.3);
            transform:rotate(360deg);
        }
        span{
            position:absolute;
            bottom:-38px;
            width:100%;
            height:40px;
            line-height:40px;
            text-align:center;
            border-radius:2em;
            color:#fee;
            background:hsla(240,10%,10%,0.2);
            transition:all 0.6s ease;
        }
    </style>
    <script src="../../js/jquery-1.11.0.js"></script>
</head>
<body>
    <div class="list">
        <ul>
            <li>
                <a href="#"><img src="../../img/beautifulgirl.jpg"><span>美女</span><b></b></a>
            </li>
            <li>
                <a href="#"><img src="../../img/Kassdin.jpg"><span>卡萨丁</span><b></b></a>
            </li>
            <li>
                <a href="#"><img src="../../img/about_us.png"><span>某家公司一角</span><b></b></a>
            </li>
        </ul>
    </div>
</body>
<script>
    var img = $("img");
    img.hover(function(){                                                   //给img绑定hover事件
        var imgTit = $(this).next().text();                                 //获取span元素的文本内容
        $(this).attr({"title":imgTit,"alt":imgTit});                        //设置img的title属性和alt属性，属性值都为span的文本内容
    });
    var myDiv = $("div");
    /*myDiv.attr("class","list1");                                            //给div设置class为list1,会将之前内置的class覆盖掉，当设置了多个class时，会采用最后一个，同样会覆盖之前的class*/
</script>
</html>